<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">

        <div class="search">
          <!-- 搜索区域 -->
          <el-form inline :model="form" class="demo-form-inline">
            <el-form-item label="目录名称" style="margin-right: 10px">
              <el-input v-model="form.directoryName" size="small" />
            </el-form-item>
            <el-form-item label="状态" style="margin-left: 40px">
              <el-select v-model="form.state" placeholder="请选择" size="small">
                <el-option label="开启" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="reset">清除</el-button>
              <el-button type="primary" size="small" @click="onSubmit">
                搜索
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 新增目录按钮 -->
          <el-form>
            <el-form-item>
              <el-button
                v-if="$route.query.id"
                type="text"
                class="el-icon-back"
                @click="$router.push('/subjects/list')"
              >返回学科</el-button>

              <el-button type="success" size="small" @click="add">
                <span class="el-icon-edit" />
                新增目录
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 数据记录 -->
        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        />

        <!-- 数据列表 -->
        <el-table :data="tableList" style="width: 100%; margin: 15px 0 20px">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="subjectName" label="所属学科" width="180" />
          <el-table-column prop="directoryName" label="目录名称" width="180" />
          <el-table-column prop="username" label="创建者" width="180" />
          <el-table-column prop="addDate" label="创建日期" width="180">
            <template v-slot="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量" />
          <el-table-column label="状态">
            <template #default="{ row }">{{ formatState(row.state) }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <!-- 三个按钮都要放在作用域插槽里  插入什么就显示什么 -->
            <template #default="{ row }">
              <!-- 千万别忘了传参，搞半天 -->
              <el-button type="text" @click="changeState(row)">
                {{ row.state === 0 ? '启用' : '禁用' }}
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="edit(row)"
              >
                修改
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="del(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="page">
          <el-pagination
            background
            hide-on-single-page
            :current-page="form.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="form.pagesize"
            layout="prev, pager, next, sizes,jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 弹框 -->
    <directory-add
      :show-dialog="showDialog"
      :detail="detail"
      :directorys-id="directorysId"
      @close-dialog="closeDialog"
      @get-directorys-list="getDirectorysList"
    />
  </div>
</template>

<script>
import { list as getDirectorysListApi, changeState, detail as getDetailApi, remove as delDirectoryApi } from '@/api/hmmm/directorys.js'
import DirectoryAdd from '../../module-hmmm/components/add-directory.vue'
export default {
  components: {
    DirectoryAdd
  },
  data() {
    return {
      directorysId: true,
      showDialog: false,
      // 目录表单
      form: {
        directoryName: '',
        state: null,
        page: 1,
        pagesize: 10,
        subjectID: null
      },

      tableList: [], // 列表数据
      total: 0, // 总条数
      detail: {} // 目录详情
    }
  },
  watch: {
    '$route.query.id': {
      immediate: true,
      handler(newVal) {
        // console.log(1)
        if (!newVal) {
          this.form.subjectID = null
          this.getDirectorysList()
        }
      }
    }
  },
  created() {
    this.getDirectorysList()
    this.decideId()
  },
  methods: {
    decideId() {
      this.directorysId = !!this.$route.query.id
    },
    async del(row) { // 删除功能
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delDirectoryApi(row)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        const totalPage = Math.ceil((this.total - 1) / this.form.pagesize) // 总页数
        const currentPage = this.form.page > totalPage ? totalPage : this.form.page
        this.form.page = currentPage < 1 ? 1 : currentPage
        this.getDirectorysList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async edit(row) {
      this.showDialog = true
      const { data } = await getDetailApi(row) // 获取目录详情
      // console.log(data)
      this.detail = data
    },
    add() {
      this.showDialog = true
    },
    // 关闭弹框
    closeDialog() {
      this.showDialog = false
      this.detail = {}
      if (this.$route.query.id) {
        this.detail.subjectID = this.$route.query.id
      }
    },
    // 切换每页显示条数
    handleSizeChange(val) {
      this.form.pagesize = val
      this.form.page = 1
      this.getDirectorysList()
    },
    // 切换页面
    handleCurrentChange(val) { // val是你点击的页码
      this.form.page = val // 如果val是你点的第二页，就切换第二页数据
      this.getDirectorysList()
    },
    // 改变状态
    async changeState(row) {
      await changeState({ id: row.id, state: `${row.state === 1 ? 0 : 1}` })
      this.$message.success('操作成功')
      this.getDirectorysList()
    },
    // 状态格式化
    formatState(val) {
      const state = {
        1: '已启用',
        0: '已禁用'
      }
      return state[val] // 返回格式化后的值用作作用域插槽显示
    },
    // 渲染列表
    async getDirectorysList() {
      if (this.$route.query.id) {
        this.form.subjectID = this.$route.query.id
        this.detail.subjectID = this.$route.query.id
      }
      const { data } = await getDirectorysListApi(this.form) // 进行搜索的筛选
      // console.log(data)
      this.total = data.counts
      this.tableList = data.items
    },
    // 清除
    reset() {
      this.form.state = null
      this.form.directoryName = ''
    },
    // 确认筛选
    onSubmit() {
      this.form.page = 1
      this.getDirectorysList()
    }
  }
}
</script>

<style scoped>
.search {
  display: flex;
  justify-content: space-between;
}
.page {
  display: flex;
  justify-content: end;
}
</style>
